<meta charset="UTF-8">
<style>
    html,body {
        background: black;
    }
</style>
    <body>
        <div class="xuetiao" style="width: 200px;height: 50px;border: 2px solid skyblue;">
            <div class="xue" style="width: 200px;height: 50px;background: red;"></div>
        </div>
    </body>
    <script>
        function random(min,max){
            return Math.floor(Math.random()*(max-min+1)+min)
        }
        document.onclick = function(evt){
            var e = evt || window.event
            var target = e.target || e.srcElement
            
            if(target.nodeName === 'IMG'){
                document.body.removeChild(target)
                var xue = parseInt(document.querySelector('.xue').style.width)
                if(xue < 200){
                    document.querySelector('.xue').style.width = xue + 1 + 'px'
                }
            }
        }
        setInterval(function(){
            var imgObj = document.createElement('img')
            imgObj.src = './star.gif'
            var w = random(50,60)
            imgObj.width = w
            imgObj.height = w
            imgObj.style.position = 'absolute'
            var maxW = (window.innerWidth || document.documentElement.clientWidth) - w
            var maxH = (window.innerHeight || document.documentElement.clientHeight) - w
            var l =random(0,maxW)
            var t =random(0,maxH)
            imgObj.style.left = l + 'px'
            imgObj.style.top = t + 'px'
            document.body.appendChild(imgObj)
            var xue = parseInt(document.querySelector('.xue').style.width)
            document.querySelector('.xue').style.width = xue - 1 + 'px'
        },1000)
    </script>